<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="650" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '17px Arial';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';

        // --- Helper Functions ---

        // Function to draw a cross (magnetic field line into the page)
        function drawCross(x, y, size) {
            const r = size / 2;
            ctx.save();
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.beginPath();
            const angle = Math.PI / 4;
            ctx.moveTo(x - r * Math.cos(angle), y - r * Math.sin(angle));
            ctx.lineTo(x + r * Math.cos(angle), y + r * Math.sin(angle));
            ctx.moveTo(x - r * Math.cos(angle), y + r * Math.sin(angle));
            ctx.lineTo(x + r * Math.cos(angle), y - r * Math.sin(angle));
            ctx.stroke();
            ctx.restore();
        }

        // Function to draw a dashed line
        function drawDashedLine(x1, y1, x2, y2, dashLength = 5, gapLength = 3) {
            ctx.save();
            ctx.beginPath();
            ctx.setLineDash([dashLength, gapLength]);
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.setLineDash([]); // Reset to solid line
            ctx.restore();
        }
        
        // Function to draw an arrow (just a line in this case)
        function drawArrow(fromX, fromY, toX, toY) {
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.stroke();
        }


        // --- Main Drawing ---

        // 1. Draw Magnetic Field
        const gridSize = 85;
        const crossSize = 20;
        for (let i = 0; i < 5; i++) {
            for (let j = 0; j < 4; j++) {
                drawCross(150 + i * gridSize, 100 + j * gridSize, crossSize);
            }
        }

        // 2. Draw the Square Coil (as a double line)
        const coilSide = 160; 
        const coilX = 240;
        const coilY = 140;
        const coilInset = 3;
        
        ctx.save();
        ctx.lineWidth = 2;
        ctx.strokeRect(coilX, coilY, coilSide, coilSide);
        ctx.strokeRect(coilX + coilInset, coilY + coilInset, coilSide - 2 * coilInset, coilSide - 2 * coilInset);
        ctx.restore();


        // 3. Draw Wires and Terminals
        const wireStartX = coilX; 
        const wireStartY = coilY + coilSide; 
        
        const terminalLeftX = 220;
        const terminalLeftY = 380;
        const terminalRightX = 260;
        const terminalRightY = 380;
        const terminalRadius = 5;

        ctx.save();
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(wireStartX, wireStartY);
        ctx.quadraticCurveTo(220, 340, terminalLeftX, terminalLeftY - terminalRadius);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(wireStartX, wireStartY);
        ctx.quadraticCurveTo(260, 340, terminalRightX, terminalRightY - terminalRadius);
        ctx.stroke();

        // Terminals (small circles)
        ctx.beginPath();
        ctx.arc(terminalLeftX, terminalLeftY, terminalRadius, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(terminalRightX, terminalRightY, terminalRadius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.restore();

        // 4. Draw Dimension Line
        const dimLineX = 140;
        
        // Dashed lines from coil to dimension line
        drawDashedLine(coilX, coilY, dimLineX, coilY);
        drawDashedLine(coilX, coilY + coilSide, dimLineX, coilY + coilSide);
        
        // Vertical dimension line with ticks
        ctx.save();
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(dimLineX, coilY);
        ctx.lineTo(dimLineX, coilY + coilSide);
        ctx.moveTo(dimLineX - 5, coilY); // top tick
        ctx.lineTo(dimLineX + 5, coilY);
        ctx.moveTo(dimLineX - 5, coilY + coilSide); // bottom tick
        ctx.lineTo(dimLineX + 5, coilY + coilSide);
        ctx.stroke();
        ctx.restore();
        
        // Dimension text
        ctx.textAlign = 'right';
        ctx.fillText('12 cm', dimLineX - 10, coilY + coilSide / 2);
        

        // 5. Draw Labels
        ctx.textAlign = 'left';
        // Magnetic field label
        ctx.fillText('magnetic field lines', 480, 80);
        ctx.fillText('into the page', 480, 105);
        drawArrow(470, 92.5, 150 + 3 * gridSize + crossSize/2, 100);

        // Coil label
        ctx.fillText('square coil', 480, 220);
        ctx.fillText('8 turns', 480, 245);
        drawArrow(470, 232.5, coilX + coilSide + coilInset, coilY + coilSide / 2);
        
        // Terminals label
        ctx.textAlign = 'center';
        ctx.fillText('terminals', (terminalLeftX + terminalRightX)/2, 410);

        // 6. Draw Figure Label
        ctx.fillText('Fig. 6.1', 325, 470);
        ctx.textAlign = 'left';

    </script>
</body>
</html>